<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
            {{$store.state.count}}
            getters：{{$store.getters.getCount}}

            <ul>
                <li v-for="(item,i) in $store.getters.getUpList">
                    {{i+1}}、{{item.name}}
                </li>
            </ul>
            <button @click="$store.dispatch('fun')">异步获取list的数据</button>
        <sum-number></sum-number>
        <reduce-number></reduce-number>
    </div>
    <script src="./vue.js"></script>
    <script src="vuex.js"></script>
    <script>
        Vue.component('sum-number',{
            template:`
                <div>
                    <span>当前的数字是：{{$store.state.count}}</span>
                    <button @click="add">加一</button>
                </div>
            `,
            methods:{
                add(){
                    this.$store.commit('add',[5,10]);
                }
            }
        })

        Vue.component('reduce-number',{
            template:`
                <div>
                    <span>当前的数字是：{{$store.state.count}}</span>
                    <button @click="reduce">减一</button>
                </div>
            `,
            methods:{
                reduce(){
                    this.$store.commit('reduce',10);
                }
            }
        })

        console.log(Vuex);
        // 第一步：创建store的实例并且配置配置项
        // 第二步：把store注入到vue实例之后，vue的实例及其所有的子组件都可以使用store的实例
        // 第三步：如何使用store？相当于把store挂载到所有组件实例对象的$store属性上

        /** 
            state：维护的是所有组件共享的数据

            mutations里的方法，需要我们通过commit显示的去提交

            mutations方法里任务必须是同步的
            
        */


        let store = new Vuex.Store({
            state:{  //维护的是所有组件共享的数据，类似于vue实例里的data属性
                count:1,
                list:[
                    {
                        name:"电影一",
                        isUp:true
                    },
                    {
                        name:"电影二",
                        isUp:false
                    },
                    {
                        name:"电影三",
                        isUp:true
                    }
                ]
            },
            mutations:{ //放的修改state数据的方法 ,函数的第一个参数接受的是state
                add(state,num){
                    console.log(this);
                    console.log("====",this.state === state);
                    state.count += num[1];
                },
                reduce(state,num){
                    state.count -= num
                },
                changeList(state,arr){
                    state.list = arr;
                }  
            },
            getters:{
                getCount(state,two){
                    console.log(store.getters === two);
                    console.log(this);
                    return `$${state.count}`
                },
                getUpList(state){
                    return state.list.filter(item => item.isUp)
                }
            },
            actions:{
                fun(context){
                    console.log("context",context)
                    console.log("store",store);
                    console.log(context === store);
                    setTimeout(() => {
                        //模拟获取list
                        // context.state.list = [];   不可以使用
                        context.commit('changeList',[]) ;  //显示的提交mutaions
                    },2000)
                }
            }
        })

        console.log(store);
        let vm = new Vue({
            el:'#app',
            store,
            data:{
                // count:1
            }
        })
    </script>
</body>
</html>